<template>
  <!-- 规则制度 -->
  <div class="notice-panel">
    <div
      v-for="(item,index) in list"
      :key="index + '_left_li'"
      class="notice-item"
      @click="handleDetail(item)"
    >
      <div class="label">
        <span class="cri" />
        <span class="name">{{ item.regimeName }}</span>
      </div>
      <div class="time">{{ parseTime(item.createTime,'{y}.{m}.{d}') }}</div>
    </div>

    <NewsPanel2
      :obj="obj"
      :dialog-visible="detailDialogVisible"
      dialog-type="detail"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import NewsPanel2 from './NewsPanel2'
export default {
  name: 'NoticePanel',
  components: {
    NewsPanel2
  },
  data() {
    return {
      obj: {},
      detailDialogVisible: false,
      list: [
        // { name: '规章制度名称1', time: '2019.3.28' },
      ],
      query: {
        page: 1, size: 9, regimeName: '', regimeType: '', sort: 'createTime,desc'
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    parseTime,
    handleDetail(data) {
      this.obj = data
      this.detailDialogVisible = true
    },
    closeDialog() {
      this.detailDialogVisible = false
    },
    initData() {
      const query = JSON.parse(JSON.stringify(this.query))
      query.page = query.page - 1
    }
  }

}
</script>

<style lang="scss" scoped>
.notice-panel{
  height: 100%;
  display: flex;
  // justify-content: space-around;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0px 10px;
  overflow: auto;
  .notice-item{
    height: 40px;
    line-height: 40px;
    display: flex;
    padding: 0px  0 0 15px;
    width: 100%;
    .label{
      flex:1;
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      display: flex;
      align-items: center;
      .cri{
        display: inline-block;
        height: 4px;
        width: 4px;
        flex: 0 0 4px;
        background: #333;
        border-radius: 2px;
        position: relative;
        margin-right: 5px;
      }
      .name{
        display: inline-block;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }
    .time{
      flex: 0 0 75px;
      color: #919191;
      font-size: 14px;
      text-align: right;
    }
    &:hover{
      background:rgba(153,200,233,0.32);
      background:linear-gradient(90deg,rgba(153,200,233,0.32) 0%,rgba(255,255,255,0) 100%);
      .cri{
        background: #1762BD;
      }
      .name{
        color: #1762BD;
      }
    }
  }
}
</style>
